<template>
  <div id="systemConfig" class="app-container">
    <div class="flex-row flex-1">
      <group @children="loadChildrenGroup" />
      <div class="flex-1 flex-main">
        <el-tabs v-if="configTypes.length>0" v-model="selectedGroup.code" class="common-tabs" @tab-click="handleTabClick">
          <el-tab-pane v-for="item in configTypes" :key="item.dataDictItemCode" :label="item.paramName" :data-id="item.id" :name="item.paramCode" />
        </el-tabs>
        <div v-if="configTypes.length==0" class="common-title">
          <h2 class="bold">{{ selectedGroup.name }}</h2>
        </div>
        <system-setting-editor :selected-group="selectedGroup" />
      </div>

    </div>
  </div>
</template>

<script>
import group from './group.vue'
export default {
  components: { group },
  data() {
    return {
      configTypes: [],
      selectedGroup: {}
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    async loadChildrenGroup(val) {
      this.configTypes = val.children
      if (this.configTypes.length > 0) {
        this.selectedGroup = {
          name: this.configTypes[0].paramName,
          code: this.configTypes[0].paramCode,
          id: this.configTypes[0].id
        }
      } else {
        this.selectedGroup = val.group
      }
    },
    handleTabClick(tab, event) {
      this.selectedGroup = {
        ...this.selectedGroup,
        name: tab.label,
        id: tab['$attrs']['data-id']
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #systemConfig{
    .common-title{
      width: 100%;
      background: #fff;
      padding-left: 20px;
    }
  }
</style>

